<!--processed-->
<link rel="stylesheet" href="/views/resolution/inquiry/tmp.css">
<section id="inquiry">
    <div class="breadcrumb">
        <i class="back iconfont icon-fanhui1" id="back"></i>
        <span>Resolution</span>
        <span class="interval">/</span>
        <span>Inquiry</span>
    </div>
    <div class="layout-processed feat-grid">
        <div class="header fx-col-c">
            <form id="form" action="" class="row">

                <div class="col-sm-4 col-sm-offset-1">
                    <div data-val="" class="">
                        <section data-name="transaction_type" class="com-select">
                            <div class="sel-item">
                                <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                                <input name="transaction_type" type="hidden" value="">
                                <i class="sel-icon"></i>
                            </div>
                            <ul class="sel-content">
                                <li data-val="buyer" class="sel-list">name</li>
                                <li data-val="order_sn" class="sel-list">invoice id</li>
                                <li data-val="seller_transaction_id" class="sel-list">transaction id</li>
                                <li data-val="email" class="sel-list">email</li>
                            </ul>
                        </section>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1">
                    <div class="search-a fx-row-b">
                        <i id="searchBtn" class="iconfont icon-sousuo"></i>
                        <input name="content" type="text" placeholder="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <button id="check" type="button" class="btn-e ml20">查询</button>
                </div>
            </form>
        </div>

        <div class="data-box">
            <table class="table-a">
                <thead class="t-head">
                <tr>
                    <th class="tc">序号</th>
                    <th>订单号</th>
                    <th>email</th>
                    <th>交易时间</th>
                    <th>支付金额</th>
                    <th>币种</th>
                    <th>所属站点</th>
                    <th>交易号</th>
                </tr>
                </thead>
                <tbody id="inquiry-data-list">
                    <!--list data-->
                    <script id="inquiry-data" type="text/html">
                        {{each list v i}}
                        <tr class="nth">
                            <td class="tc">{{i + $imports.count}}</td>
                            <td>{{v.OrderNo}}</td>
                            <td>{{v.Email}}</td>
                            <td>{{v.PayTime}}</td>
                            <td>{{v.FinalPrice}}</td>
                            <td>{{v.Currency.Name}}</td>
                            <td>{{v.SiteName}}</td>
                            <td>{{v.Tx}}</td>
                        </tr>
                        {{/each}}
                    </script>
                </tbody>
            </table>
        </div>

    </div>
    <footer class="footer fx-row-b hide">
        <div>
            <span>Showing <span id="page-start">1</span> to <span id="page-end">20</span> of <span id="page-total">0</span> entries</span>
            <select name="page">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span>records per page</span>
        </div>
        <section id="box-page"></section>
    </footer>
</section>

<!--站点列表-->
<script id="inquiry-site-list" type="text/html">
    {{each data as v i}}
    <li data-val="{{v.pp_merchant_id}}" class="sel-list">{{v.site_name}}</li>
    {{/each}}
</script>

<!-- js -->
<script>

    $.extend(window.p,{
        page:1,
        num:20,
        total:0,
        pageObj:null,
        data:{}
    });

    $(function(){

        init();

        function init(){
            //返回
            $(".back").click(function(){
                window.history.go(-1);
            });
            //初始化请求数据列表
            //request();
            //初始化分页相关
            initPage();
            //初始化选项
            $("[data-name='transaction_type']").comSelect({init:true,});

            $("#check").on('click',function(){
                request('init');
            });
            
        }

        function initPage(){
            //首先拿出用户当前页码
            if(com.getCookie('pageNum')) {
                p.num = com.getCookie("pageNum");
            }
            //设置当前页码显示
            $("select[name='page']").val(p.num);

            //选择分页事件
            $("select[name='page']").on('change',function(){
                var val = $(this).val();
                com.setCookie('pageNum',val,720);
                p.num = val;
                request();
                //location.reload();
            });

            //实例化分页组件
            p.pageObj = $("#box-page").comPage({
                total:p.total,
                pages:p.num,
                callback:function(page){
                    p.page = page;
                    request();
                }
            });
        }

        function renderLeftPage(){
            $("#page-total").html(p.total);
            $("#page-start").html((p.page-1)*p.num + 1);
            if(p.page === 1){
                $("#page-end").html(p.num);
            }else if(p.page == Math.ceil(p.total/p.num)) {
                $("#page-end").html(p.total);
            }else{
                $("#page-end").html(p.page*p.num);
            }
        }

        //请求列表
        function request(init){

            var content = $("[name='content']").val().trim();
            if(!content){
                $.comMessage({
                    type:'prompt',
                    text:'Enter search content',
                });
                return;
            }

            init && (p.page = 1);

            var loadObj = null;
            app.ajax({
                type:'post',
                url:app.api('/api/getPPalPaymentInfo'),
                data:getPara(),
                beforeSend:function(){
                    loadObj = $.load({
                        insert:$(".layout-processed"),
                    });
                    //$('footer').removeClass('hide')
                },
                success:function(res){
                    template.defaults.imports.count = (p.page-1)*p.num + 1;
                    if(res.code == 0){
                        console.log(res)

                        //渲染模板
                        var tmp = template('inquiry-data', res.data);
                        $("#inquiry-data-list").html(tmp);

                        //保存分页总数
                        p.total = res.data.TotalCount;
                        //设置右侧分页组件页码
                        init ? p.pageObj.setPage(p.total,p.num,1) : p.pageObj.setPage(p.total,p.num);

                        renderLeftPage();
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                        $('footer').addClass('hide')
                    }
                },
                complete:function(){
                    loadObj.close()
                }
            });
        }


        //获取列表参数
        function getPara(){
            $.each($("#form").serializeArray(),function(index,item){
                p.data[item.name] = item.value ;
            });
            p.data.page = p.page;
            p.data.page_nums = p.num;
            return p.data;
        }

    })


</script>